<template>
    <div class="h-screen bg-light-400 p-4">
        <div class="overflow-hidden rounded-xl">
            <img src="https://1.s91i.faiusr.com/4/AFsIkK06EAQYACC5-sTmBSiIwMOYATDuBTjoAg%21800x800.png?_tm=3&v=1603356183923"
                alt="">
        </div>
        <div class="mt-4">
            <div class="text-xl mt-5">学员认证</div>
            <nut-form ref="ruleForm" :model-value="userForm" @touchstart="touchstart">
                <nut-form-item label="姓名" required prop="name" :rules="[{ required: true, message: '请填写姓名' }]">
                    <nut-input v-model="userForm.name" class="nut-input-text" placeholder="请输入姓名" type="text" />
                </nut-form-item>
                <nut-form-item label="联系电话" required prop="phone"
                    :rules="[{ required: true, message: '请填写联系方式' }, { regex: /^1[3456789]\d{9}$/, message: '手机号格式错误' }]">
                    <nut-input v-model="userForm.phone" class="nut-input-text" placeholder="请输入联系电话" type="text" />
                </nut-form-item>
                <nut-form-item label="备注" prop="comment">
                    <nut-textarea v-model="userForm.comment" placeholder="请输入备注" limit-show max-length="200" type="text" />
                </nut-form-item>
            </nut-form>
        </div>
        <div class="mt-6">
            <nut-button type="info" block @click="submit">提交认证</nut-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'
import { showToast } from '@nutui/nutui'
import '@nutui/nutui/dist/packages/toast/style';
const router = useRouter();
const userForm = ref<{
    name: string;
    phone: string;
    comment: string;
}>({})
const ruleForm = ref(null)
const needClearValidate = ref(false)

const submit = () => {
    ruleForm.value.validate().then(async ({ valid, errors }: any) => {
        if (valid) {
            // 实名认证
            showToast.success('提交线索成功')
            setTimeout(() => {
                router.back()
            }, 1000)
        } else {
            showToast.warn('信息填写有误')
            needClearValidate.value = true;
        }
    });
}

const touchstart = () => {
    if (needClearValidate.value) {
        ruleForm.value.reset()
        needClearValidate.value = false
    }
}

onActivated(() => {
    userForm.value = {}
})
</script>